<template>
  <div class='menu-widgets'>
    <div class='icon-area site-icon'>
      <a role="button" class="iconfont icon-random-fill" title="随机一篇文章" :href="ArticlePath.Path +randomArticleStore.url"></a>
    </div>

    <div class='user-area'>
      <div class='user-card guest'>
        <a role="button" href="/about" class="user-avatar" target="_blank">
          <img v-if='websiteConfig.authorAvatar' :src='websiteConfig.authorAvatar' :alt='websiteConfig.name' @error='handleErrorAvatar'>
          <img v-else src='../../assets/user/avatar.jpg' alt='avatar'>
        </a>
        <div class='user-card-info'>
          <div class="name">欢迎来到{{ websiteConfig.name }} </div>
          <div class="mail">为您导读最新动态</div>
        </div>
      </div>
      <div class='user-tools'>
        <div class='site-icon'>
          <ThemeToggle />
          <a role="button" class="iconfont icon-pinglun user-btn active" title="互动列表"></a>
        </div>
        <form role="search" method="get" class="search-form" action='https://www.baidu.com/s'>
          <label>
            <span class="screen-reader-text">Search for:</span>
            <input type="search" class="search-field" placeholder="百度关键字搜索 …" value="" name="wd" title="百度搜索">
          </label>
          <input type="submit" class="search-submit" value="搜 索">
        </form>
      </div>
    </div>

    <div class='menu-area-content'>
      <div class='user-sub widget-area active' role="complementary">
        <aside class='widget widget_block widget_calendar'>
          <el-config-provider :locale='local'>
            <el-calendar></el-calendar>
          </el-config-provider>
        </aside>
        <aside class='widget widget_block widget_recent_entries'>
          <ul class='block-latest-posts__list has-dates block-latest-posts'>
            <template v-for='item in publishData'>
              <li>
                <a :href='ArticlePath.Path+item.id' class='block-latest-posts__post-title' target='_blank'>{{ item.articleTitle }}</a>
                <time :datetime='item.createTime'>{{ item.createTime }}</time>
              </li>
            </template>
          </ul>
        </aside>
        <aside class='widget widget_block widget_rss'>
          <ul class='has-dates has-excerpts book block-rss'>
            <template v-for='book in publishBookData'>
              <li class='block-rss__item'>
                <div class='block-rss__item-title'>
                  <a :href='book.bookUrl' target='_blank'>{{ book.bookName }}</a>
                </div>
                <time :datetime='book.createTime'>{{ book.createTime }}</time>
                <div class='block-rss__item-excerpt'>推荐指数: {{ book.bookRate }}</div>
              </li>
            </template>
          </ul>
        </aside>
        <aside class='widget widget_block widget_hot_search baidu'>
          <ul class='is-style-outline block-baidu-hot'>
            <template v-for='(item,index) in baiDuHotData'>
              <li>
                <a :href='item.url' class='block-latest-posts__post-title' target='_blank'>{{ item.keyword }}</a>
                <span class='hot-value'>{{ String(index + 1).padStart(4,'No.') }}</span>
                <div class='block-rss__item-excerpt' v-if='item.hotValue'>热度: {{ item.hotValue + '°'}}</div>
                <div class='block-rss__item-excerpt' v-else>热度: 暂无热度</div>
              </li>
            </template>
          </ul>
        </aside>
        <aside class='widget widget_block widget_hot_search weibo'>
          <ul class='is-style-outline block-baidu-hot weibo-hot'>
            <template v-for='(item,index) in weiBoHotData'>
              <li>
                <a :href='item.url' class='block-latest-posts__post-title' target='_blank'>{{ item.keyword }}</a>
                <span class='hot-value'>{{ String(index + 1 ).padStart(4,'No.') }}</span>
                <div class='block-rss__item-excerpt' v-if='item.hotValue'>热度: {{ item.hotValue + '°'}}</div>
                <div class='block-rss__item-excerpt weibo-hottest' v-else>当前最热</div>
              </li>
            </template>
          </ul>
        </aside>
      </div>
      <div class='widget-out'></div>
      <div class='site-des'>
        遇见总有意义哪怕只是告别
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import ThemeToggle from '@/components/ToggleSwitch/ThemeToggle.vue'
import { computed, defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue'
import api from '@/api/api'
import { useAppStore } from '@/stores/app'
import { Action, ElMessage, ElMessageBox } from 'element-plus'
import { animateDelayedElements } from '@/utils/animateDelay'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useRandomArticle } from '@/stores/randomArticle'
import { handleErrorAvatar } from '@/utils/avatarUtil'
import { ArticlePath } from '@/models/@types'
export default defineComponent({
  name: 'MenuWidget',
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  components: { ThemeToggle },
  setup(){
    const appStore = useAppStore()
    const randomArticleStore = useRandomArticle()
    const reactiveDate = reactive({
      publishData: '' as any,
      publishBookData: '' as any,
      baiDuHotData: '' as any,
      weiBoHotData: '' as any,
    })
    onMounted(()=>{
      getPublishInfo()
      getBookPublish()
      getHotData()
      nextTick(()=>{
        animateDelayedElements('.menu-widgets .widget-area', '.widget', 0)
      })
    })
    const getPublishInfo = () => {
      api.getArticlePublish().then(({ data }) =>{
        reactiveDate.publishData= data.data
      })
    }
    const getBookPublish = () => {
      api.getBookPublish().then(({ data })=>{
        reactiveDate.publishBookData = data.data
      })
    }
    const getHotData = () => {
      const baidu = {
        type: 'baidu'
      }
      const weibo = {
        type: 'weibo'
      }
      api.getHotSearch(baidu).then(({ data }) =>{
        reactiveDate.baiDuHotData= data.data.data.slice(0,7)
      })
      api.getHotSearch(weibo).then(({ data }) =>{
        reactiveDate.weiBoHotData= data.data.data.slice(0,7)
      })
    }
    return{
      ...toRefs(reactiveDate),
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      }),
      handleErrorAvatar,
      local:zhCn,
      randomArticleStore: computed(()=>{
        return  randomArticleStore
      })
    }
  }
})
</script>
